<template>
  <div class="jx-content" id="experimentFile" style="padding: 30px 30px">
    <!-- 任务信息start -->
    <div class="task_info">
      <div class="info_left">
        <div class="task_title">任务信息</div>
        <div class="task_name">
          <p>任务名称</p>
          <input v-model="taskform.name" placeholder="请为您的任务命名" />
        </div>
        <div class="task_score">
          <p>任务分数</p>
          <input v-model="taskform.score" placeholder="请输入任务分数" />
        </div>
      </div>
      <div class="info_right">
        <button class="task_save" @click="taskSave()">保存</button>
      </div>
    </div>
    <!-- 任务信息 end-->
    <!-- 任务手册与参考答案 -->
    <div class="saveBtn btn-styles">
      <el-radio-group v-model="tabPosition">
        <el-radio-button label="1">任务手册</el-radio-button>
        <el-radio-button label="2">参考答案</el-radio-button>
      </el-radio-group>
      <!-- 左侧小按钮 -->
      <div class="btn-list">
        <!-- 任务手册时展示 -->
        <div v-show="tabPosition == 1">
          <span v-show=" taskTxt != '' && tabPosition == 1 && taskMavonEditorShow == false ">
            <i class="iconfont icon-icon_edit" @click="repeatFn(1)"></i>
          </span>
          <span class="word-upload">
            <i class="iconfont icon-tubiaozhizuomoban2"></i>
            <input id="upload-file-input" type="file" @change="getFile" title="Word上传" />
          </span>
          <span>
            <i class="iconfont icon-baocun2" @click="submitFn(1)"></i>
          </span>
        </div>
        <!-- 参考答案时展示 -->
        <div v-show="tabPosition == 2">
          <span v-show=" answerTxt != '' && tabPosition == 2 && answerMavonEditorShow == false ">
            <i class="iconfont icon-icon_edit" @click="repeatFn(2)"></i>
          </span>
          <span class="word-upload">
            <i class="iconfont icon-tubiaozhizuomoban2"></i>
            <input id="upload-file-input" type="file" @change="getFile" title="Word上传" />
          </span>
          <span>
            <i class="iconfont icon-baocun2" @click="submitFn(2)"></i>
          </span>
        </div>
      </div>
    </div>
    <!-- 没有任务内容 展示编辑器 此时可以编辑-->
    <!-- 任务手册 -->
    <div v-show=" tabPosition == 1 && (taskTxt == '' || taskMavonEditorShow == true) ">
      <div class="ediator">
        <mavonEditor ref="taskEdit" class="ediator-ev"></mavonEditor>
      </div>
    </div>
    <!-- 参考答案 -->
    <div v-show=" tabPosition == 2 && (answerTxt == '' || answerMavonEditorShow == true) ">
      <div class="ediator">
        <mavonEditor ref="answerEdit" class="ediator-ev"></mavonEditor>
      </div>
    </div>
    <!--有任务内容 展示div（此时点击图标才可修改） -->
    <!-- 任务手册 -->
    <div v-show=" tabPosition == 1 && taskHtml != '' && taskMavonEditorShow == false ">
      <div class="iframse">
        <div class="markdown-body editormd-preview-container" v-html="taskHtml"></div>
      </div>
    </div>
    <!-- 参考答案 -->
    <div v-show=" tabPosition == 2 && answerHtml != '' && answerMavonEditorShow == false ">
      <div class="iframse">
        <div class="markdown-body editormd-preview-container" v-html="answerHtml"></div>
      </div>
    </div>
    <!-- 进入实验图标 -->
    <div class="virtual-position" @click="VirtualLink">
      <img src="./../../../assets/images/virtual_link.png" />
    </div>
    <!-- 分配镜像 -->
    <el-dialog :close-on-click-modal="false" class="dialog-distribution" title="分配镜像" :visible.sync="dialogDistributionFormVisible" label-width="100px" width="830px">
      <el-form :model="distributionform" ref="distributionform">
        <el-form-item class="is-required" label="实验类型：">
          <el-radio-group v-model="distributionform.experimentType" @change="experimentTypeChange">
            <el-radio :label="1">可视化实验</el-radio>
            <!-- <el-radio :label="2">NoteBook实验</el-radio> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item class="is-required" label="配置类型：" v-if="distributionform.experimentType == 1">
          <el-radio-group v-model="distributionform.resource">
            <el-radio :label="1">单节点</el-radio>
            <el-radio :label="2">集群</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="distributionform.experimentType == 2">
          <el-form-item class="config-item">
            <div class="fl item-config">
              <el-form-item prop="distributedData.cpuValue" :rules="{
                  required: true,
                  message: '请选择CPU上限',
                  trigger: 'blur',
                }" label="配置：" style="float: left; width: 210px" class="item-cpu">
                <el-select v-model="distributionform.distributedData.cpuValue" value-key="value" placeholder="CPU上限">
                  <el-option v-for="item in distributionform.distributedData.cpuOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="distributedData.ramValue" :rules="{
                  required: true,
                  message: '请选择内存上限',
                  trigger: 'blur',
                }" style="width: 110px; float: left; margin-left: 10px">
                <el-select v-model="distributionform.distributedData.ramValue" placeholder="内存上限">
                  <el-option v-for="item in distributionform.distributedData.ramOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-form-item>
          <el-form-item class="is-required" label="镜像：">
            <el-cascader :options="distributionform.options0" v-model="distributionform.optionsValue0" :show-all-levels="false" @change="handleItemChange"></el-cascader>
          </el-form-item>
        </template>
        <template v-if="distributionform.experimentType == 1">
          <div class="form-title">
            {{ distributionform.resource == 1 ? "伪分布" : "主节点" }}
          </div>
          <!-- 伪分布 -->
          <el-form-item class="config-item" v-if="distributionform.resource == 1">
            <div class="fl item-config">
              <el-form-item prop="distributedData.cpuValue" :rules="{
                  required: true,
                  message: '请选择CPU上限',
                  trigger: 'blur',
                }" label="配置：" style="float: left; width: 210px" class="item-cpu">
                <el-select v-model="distributionform.distributedData.cpuValue" value-key="value" placeholder="CPU上限">
                  <el-option v-for="item in distributionform.distributedData.cpuOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="distributedData.ramValue" :rules="{
                  required: true,
                  message: '请选择内存上限',
                  trigger: 'blur',
                }" style="width: 110px; float: left; margin-left: 10px">
                <el-select v-model="distributionform.distributedData.ramValue" placeholder="内存上限">
                  <el-option v-for="item in distributionform.distributedData.ramOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <!-- <el-form-item class="fl item-Gpu" label="GPU">
                                <el-switch
                                    v-model="distributionform.distributedData.switchValue">
                                </el-switch>
                            </el-form-item> -->
          </el-form-item>
          <el-form-item class="is-required" label="镜像：" v-if="distributionform.resource == 1">
            <el-cascader :options="distributionform.options0" v-model="distributionform.optionsValue0" :show-all-levels="false" @change="handleItemChange"></el-cascader>
          </el-form-item>
          <!-- 伪分布end -->
          <!-- 主节点 -->
          <el-form-item class="config-item" v-if="distributionform.resource == 2">
            <div class="fl item-config">
              <el-form-item prop="nodeMianData.cpuValue" :rules="{
                  required: true,
                  message: '请选择CPU上限',
                  trigger: 'blur',
                }" label="配置：" style="float: left; width: 210px" class="item-cpu">
                <el-select v-model="distributionform.nodeMianData.cpuValue" value-key="value" placeholder="CPU上限">
                  <el-option v-for="item in distributionform.nodeMianData.cpuOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="nodeMianData.ramValue" :rules="{
                  required: true,
                  message: '请选择内存上限',
                  trigger: 'blur',
                }" style="width: 110px; float: left; margin-left: 10px">
                <el-select v-model="distributionform.nodeMianData.ramValue" placeholder="内存上限">
                  <el-option v-for="item in distributionform.nodeMianData.ramOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <!-- <el-form-item class="fl item-Gpu" label="GPU">
                                <el-switch
                                    v-model="distributionform.nodeMianData.switchValue">
                                </el-switch>
                            </el-form-item> -->
          </el-form-item>
          <el-form-item class="is-required" label="镜像：" v-if="distributionform.resource == 2">
            <el-cascader :options="distributionform.options7" v-model="distributionform.optionsValue7" :show-all-levels="false" @change="handleItemChange"></el-cascader>
          </el-form-item>
          <!-- 伪分布end -->
          <div class="form-title" v-if="distributionform.resource == 2">
            从节点
          </div>
          <!-- 镜像配置 -->
          <el-form-item class="config-item" v-if="distributionform.resource == 2">
            <div class="fl item-config">
              <el-form-item prop="mirrorConfigData.cpuValue" :rules="{
                  required: true,
                  message: '请选择CPU上限',
                  trigger: 'blur',
                }" label="配置：" style="float: left; width: 210px" class="item-cpu">
                <el-select v-model="distributionform.mirrorConfigData.cpuValue" value-key="value" placeholder="CPU上限">
                  <el-option v-for="item in distributionform.mirrorConfigData.cpuOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="mirrorConfigData.ramValue" :rules="{
                  required: true,
                  message: '请选择内存上限',
                  trigger: 'blur',
                }" style="width: 110px; float: left; margin-left: 10px">
                <el-select v-model="distributionform.mirrorConfigData.ramValue" placeholder="内存上限">
                  <el-option v-for="item in distributionform.mirrorConfigData.ramOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <!-- <el-form-item class="fl item-Gpu" label="GPU">
                                <el-switch
                                    v-model="distributionform.mirrorConfigData.switchValue">
                                </el-switch>
                            </el-form-item> -->
          </el-form-item>
          <!-- 镜像配置 -->
          <el-form-item v-if="distributionform.resource == 2" label="从节点数：">
            <div class="virtual-step">
              <ul>
                <!-- <li v-for="(item, index) in distributionform.virtualStepList" @click="AddClass(((index+1)*2))" :class="{ active:((index+1)*2) == distributionform.virtualStepCurrent, 'active-disabled': index != 0}">{{item.value}}</li> -->
                <li v-for="(item, index) in distributionform.virtualStepList" @click="AddClass(index + 1)" :class="{
                    active: index + 1 == distributionform.virtualStepCurrent,
                  }" :key="index">
                  {{ item.value }}
                </li>
              </ul>
            </div>
          </el-form-item>
          <div class="item-node" v-if="distributionform.resource == 2">
            <el-form-item class="is-required" label="镜像1：" v-if="
                distributionform.virtualStepCurrent == 1 ||
                distributionform.virtualStepCurrent == 2 ||
                distributionform.virtualStepCurrent == 4 ||
                distributionform.virtualStepCurrent == 6
              ">
              <el-cascader :options="distributionform.options1" v-model="distributionform.optionsValue1" :show-all-levels="false" @change="handleItemChange"></el-cascader>
            </el-form-item>
            <el-form-item class="is-required" label="镜像2：" v-if="
                distributionform.virtualStepCurrent == 2 ||
                distributionform.virtualStepCurrent == 4 ||
                distributionform.virtualStepCurrent == 6
              ">
              <el-cascader :options="distributionform.options2" v-model="distributionform.optionsValue2" :show-all-levels="false" @change="handleItemChange"></el-cascader>
            </el-form-item>
            <el-form-item class="is-required" label="镜像3：" v-if="
                distributionform.virtualStepCurrent == 4 ||
                distributionform.virtualStepCurrent == 6
              ">
              <el-cascader :options="distributionform.options3" v-model="distributionform.optionsValue3" :show-all-levels="false" @change="handleItemChange"></el-cascader>
            </el-form-item>
            <el-form-item class="is-required" label="镜像4：" v-if="
                distributionform.virtualStepCurrent == 4 ||
                distributionform.virtualStepCurrent == 6
              ">
              <el-cascader :options="distributionform.options4" v-model="distributionform.optionsValue4" :show-all-levels="false" @change="handleItemChange"></el-cascader>
            </el-form-item>
            <el-form-item class="is-required" label="镜像5：" v-if="distributionform.virtualStepCurrent == 6">
              <el-cascader :options="distributionform.options5" v-model="distributionform.optionsValue5" :show-all-levels="false" @change="handleItemChange"></el-cascader>
            </el-form-item>
            <el-form-item class="is-required" label="镜像6：" v-if="distributionform.virtualStepCurrent == 6">
              <el-cascader :options="distributionform.options6" v-model="distributionform.optionsValue6" :show-all-levels="false" @change="handleItemChange"></el-cascader>
            </el-form-item>
          </div>
        </template>
      </el-form>
      <div class="distribution-item" v-if="distributionform.distributionData">
        <div class="jx-course-box">
          <img :src="distributionform.distributionData.iconUrl" />
          <span v-text="distributionform.distributionData.imageName"></span>
        </div>
        <div class="jx-course-text" v-text="distributionform.distributionData.description"></div>
        <div class="jx-course-icon" v-if="distributionform.distributionData.gpu">
          <img src="./../../../assets/images/gpu_icon.png" />
        </div>
        <div class="jx-course-icon" v-if="distributionform.distributionData.notebook">
          <img src="./../../../assets/images/notebook_icon.png" />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="DistributionFormSave('distributionform', 1)">保 存</el-button>
        <el-button class="button-style" @click="DistributionFormSave('distributionform', 2)">保存并进入环境</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const _ = require('lodash')
import draggable from 'vuedraggable'
import mavonEditor from '../../../components/mavonEditor'
import {
  getOnesInfoCP,
  modifyTaskCP,
  getTaskAndAnswerInfoCP,
  modifyTaskAndAnswerInfoCP,
} from '@/api/competitionPlatform'

export default {
  name: 'experimentFile',
  components: {
    mavonEditor,
    draggable,
  },
  data() {
    return {
      taskform: {
        name: '',
        score: 0,
        introduction: '',
      },
      //用于修改任务信息
      id: '',
      //参考答案纯文本
      answerTxt: '',
      //参考答案html文本
      answerHtml: '',
      //任务说明纯文本
      taskTxt: '',
      //任务说明html文本
      taskHtml: '',
      //展示任务说明富文本编辑器开关
      taskMavonEditorShow: false,
      //展示参考答案富文本编辑器开关
      answerMavonEditorShow: false,

      //初始高度
      hei: 0,
      show: '',
      targetShow: '',
      //课程id
      courseId: '',
      //章节id
      chapterId: '',
      //分配镜像弹窗
      dialogDistributionFormVisible: false,
      distributionform: {
        // 类型
        resource: 1,
        // 实验类型 1 可视化实验 2 notebook实验
        experimentType: 1,
        // 伪分布数组
        distributedData: {
          // cpu配置
          cpuOptions: [
            {
              value: '1',
              label: '1核',
            },
            {
              value: '2',
              label: '2核',
            },
            {
              value: '4',
              label: '4核',
            },
            {
              value: '6',
              label: '6核',
            },
            {
              value: '8',
              label: '8核',
            },
            {
              value: '10',
              label: '10核',
            },
          ],
          cpuValue: '',
          ramOptions: [
            {
              value: '1',
              label: '1G',
            },
            {
              value: '2',
              label: '2G',
            },
            {
              value: '4',
              label: '4G',
            },
            {
              value: '6',
              label: '6G',
            },
            {
              value: '8',
              label: '8G',
            },
            {
              value: '10',
              label: '10G',
            },
            {
              value: '12',
              label: '12G',
            },
            {
              value: '14',
              label: '14G',
            },
            {
              value: '16',
              label: '16G',
            },
            {
              value: '32',
              label: '32G',
            },
            {
              value: '48',
              label: '48G',
            },
            {
              value: '64',
              label: '64G',
            },
          ],
          ramValue: '',
          // GPU
          // switchValue: false
        },
        // 镜像配置
        mirrorConfigData: {
          // cpu配置
          cpuOptions: [
            {
              value: '1',
              label: '1核',
            },
            {
              value: '2',
              label: '2核',
            },
            {
              value: '4',
              label: '4核',
            },
            {
              value: '6',
              label: '6核',
            },
            {
              value: '8',
              label: '8核',
            },
            {
              value: '10',
              label: '10核',
            },
          ],
          cpuValue: '',
          ramOptions: [
            {
              value: '1',
              label: '1G',
            },
            {
              value: '2',
              label: '2G',
            },
            {
              value: '4',
              label: '4G',
            },
            {
              value: '6',
              label: '6G',
            },
            {
              value: '8',
              label: '8G',
            },
            {
              value: '10',
              label: '10G',
            },
            {
              value: '12',
              label: '12G',
            },
            {
              value: '14',
              label: '14G',
            },
            {
              value: '16',
              label: '16G',
            },
            {
              value: '32',
              label: '32G',
            },
            {
              value: '48',
              label: '48G',
            },
            {
              value: '64',
              label: '64G',
            },
          ],
          ramValue: '',
          // GPU
          switchValue: false,
        },
        // 主节点
        nodeMianData: {
          // cpu配置
          cpuOptions: [
            {
              value: '1',
              label: '1核',
            },
            {
              value: '2',
              label: '2核',
            },
            {
              value: '4',
              label: '4核',
            },
            {
              value: '6',
              label: '6核',
            },
            {
              value: '8',
              label: '8核',
            },
            {
              value: '10',
              label: '10核',
            },
          ],
          cpuValue: '',
          ramOptions: [
            {
              value: '1',
              label: '1G',
            },
            {
              value: '2',
              label: '2G',
            },
            {
              value: '4',
              label: '4G',
            },
            {
              value: '6',
              label: '6G',
            },
            {
              value: '8',
              label: '8G',
            },
            {
              value: '10',
              label: '10G',
            },
            {
              value: '12',
              label: '12G',
            },
            {
              value: '14',
              label: '14G',
            },
            {
              value: '16',
              label: '16G',
            },
            {
              value: '32',
              label: '32G',
            },
            {
              value: '48',
              label: '48G',
            },
            {
              value: '64',
              label: '64G',
            },
          ],
          ramValue: '',
          // GPU
          switchValue: false,
        },
        options0: [],
        optionsValue0: [],
        options1: [],
        optionsValue1: [],
        options2: [],
        optionsValue2: [],
        options3: [],
        optionsValue3: [],
        options4: [],
        optionsValue4: [],
        options5: [],
        optionsValue5: [],
        options6: [],
        optionsValue6: [],
        options7: [],
        optionsValue7: [],
        virtualStepList: [{ value: 1 }, { value: 2 }],
        virtualStepCurrent: 1,
        // 镜像列表数据
        distributionData: '',
      },

      // 新增需求
      // tab标记
      tabPosition: 1,

      //多任务表单信息
      formList: {
        info: '',
      },
      //弹窗表单
      formlist: {
        order: '',
        name: '',
      },

      rules: {
        name: [
          {
            required: true,
            message: '请输入任务名称',
            trigger: 'blur',
          },
        ],
      },
      //单任务id
      singleTaskId: '',
      //顺序调整弹窗
      dialogSort: false,
      //添加/修改
      title: '',
      myVideo: '',

      judge: '',
      judgerever: '',
      filterText: '',
      cur: 0,
    }
  },
  created() {
    //单任务id
    this.singleTaskId =
      this.$localstorage.getLocalStorage('chapterInfoData').singleTaskId
    let screenHeight = document.documentElement.clientHeight
    this.chapterId =
      this.$localstorage.getLocalStorage('chapterInfoData').chapterId
    this.courseId = this.$localstorage.getLocalStorage('courseId')
    this.hei = screenHeight - 300
    this.init()
    // this.judgeGet();
    this.getTaskInfo()
  },
  watch: {
    filterText: _.debounce(function (val) {
      if (this.cur == 0) {
        this.$refs.precut.filter(val)
      }

      if (this.cur == 1) {
        this.$refs.custom.filter(val)
      }
    }, 1000),
  },
  computed: {
    //拖拽插件
    dragOptions() {
      return {
        animation: 200,
        group: 'description',
        disabled: false,
      }
    },
  },
  destroyed() {
    if (this.myVideo) {
      this.myVideo.dispose()
    }
  },
  methods: {
    //获取任务信息，任务描述，参考答案
    init() {
      // 获取任务说明和参考答案
	  console.log(123123123131231);
      getTaskAndAnswerInfoCP(this.courseId, this.singleTaskId).then((res) => {
        console.log('任务说明参考答案', res)
        if (res.code == '200') {
          //任务说明
          //   if (
          //     res.data.laboratoryTarget.creativeVersion != undefined &&
          //     res.data.laboratoryTarget.displayVersion != undefined
          //   ) {
          //     this.taskTxt = res.data.laboratoryTarget.creativeVersion[0].content;
          //     this.taskHtml =
          //       res.data.laboratoryTarget.displayVersion[0].htmlContent;
          //     this.$refs.taskEdit.value = this.taskTxt;
          //   }
          //   //参考答案
          //   if (
          //     res.data.laboratoryManual.creativeVersion != undefined &&
          //     res.data.laboratoryManual.displayVersion != undefined
          //   ) {
          //     this.answerTxt =
          //       res.data.laboratoryManual.creativeVersion[0].content;
          //     this.answerHtml =
          //       res.data.laboratoryManual.displayVersion[0].htmlContent;
          //     this.$refs.answerEdit.value = this.answerTxt;
          //   }
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 获取任务信息
    getTaskInfo() {
      getOnesInfoCP(this.courseId, this.chapterId)
        .then((res) => {
          if (res.code == 200) {
            this.taskform.name = res.data.name
            this.taskform.score = res.data.score
            this.taskform.introduction = res.data.introduction
          } else {
            this.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 修改保存任务信息
    taskSave() {
      if (this.taskform.name !== '' && this.taskform.score > 0) {
        this.$confirm('是否确定修改?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          modifyTaskCP(this.courseId, this.chapterId, this.taskform)
            .then((res) => {
              if (res.code == '200') {
                this.$message({
                  message: '保存成功',
                  type: 'success',
                })
              } else {
                this.$message.error(res.message)
              }
            })
            .catch((err) => console.log(err))
        })
      }
    },

    //获取实验判定
    judgeGet() {
      //   let self = this;
      //   //type 多步骤2  单 1
      //   self.$http
      //     .get(
      //       "/tes/experiment/judge/info?contextId=" +
      //         self.singleTaskId +
      //         "&type=" +
      //         1
      //     )
      //     .then((response) => {
      //       let res = response.data;
      //       if (res.code == "200") {
      //         self.judge = res.data.script;
      //         self.judgerever = res.data.answer;
      //       } else {
      //         self.$message.error(res.message);
      //       }
      //     });
    },
    //判定保存
    judgeSave() {
      let self = this
      if (self.judgerever && !self.judge) {
        this.$message.warning('请添加判定脚本')
        return
      }
      self.$http
        .post('/tes/experiment/judge/save', {
          contextId: this.singleTaskId,
          type: 1,
          script: self.judge ? self.judge : '',
          answer: self.judgerever ? self.judgerever : '',
          skipped: false,
        })
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            if (!self.isshowsuccess) {
              self.$message({
                message: '保存成功',
                type: 'success',
              })
            }
            self.isshowsuccess = false
          } else {
            self.$message.error(res.message)
          }
        })
    },

    //保存并提交//问题锚点
    submitFn(flag) {
      //flag=1任务说明，flag=2参考答案

      // 任务说明
      let taskContent = this.$refs.taskEdit.value
      // 参考答案
      let answerContent = this.$refs.answerEdit.value
      //提交的数据
      let data = {}
      //提交的链接
      let url = ''

      const loading = this.$loading({
        lock: true,
        text: '文件保存中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      if (flag == 1) {
        url = `/tes/course/${this.courseId}/chapter/${this.singleTaskId}/resource-online?resourceType=14`
        // 设置data
        data.name = '任务说明'
        data.content = taskContent
        data.htmlContent = this.$refs.taskEdit.getRender()
      } else {
        url = `/tes/course/${this.courseId}/chapter/${this.singleTaskId}/resource-online?resourceType=8`
        // 设置data
        data.name = '参考答案'
        data.content = answerContent
        data.htmlContent = this.$refs.answerEdit.getRender()
      }
      modifyTaskAndAnswerInfoCP(url, data)
        .then((res) => {
          if (res.code == '200') {
            this.$message({
              message: '保存成功',
              type: 'success',
            })
            loading.close()
            this.init()
            this.taskMavonEditorShow = false
            this.answerMavonEditorShow = false
          } else {
            this.$message.error(res.data.message)
            loading.close()
          }
        })
        .catch((err) => console.log(err))
    },
    //修改
    repeatFn(flag) {
      // flag=1任务说明 flag=2参考答案
      if (flag == 1) {
        this.taskMavonEditorShow = true
      } else {
        this.answerMavonEditorShow = true
      }
    },

    // 查询NoteBook镜像列表
    getImageList(is_notebook) {
      this.$http
        .get(
          '/tes/image-allocation/image?cluster=false&notebook=' + is_notebook
        )
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            this.distributionform.options0 = res.data
          } else {
            this.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 选择实验类型
    experimentTypeChange(e) {
      this.distributionform.resource = 1
      this.distributionform.distributedData.cpuValue = ''
      this.distributionform.distributedData.ramValue = ''
      // this.distributionform.distributedData.switchValue = false
      this.distributionform.mirrorConfigData.cpuValue = ''
      this.distributionform.mirrorConfigData.ramValue = ''
      this.distributionform.mirrorConfigData.switchValue = false
      this.distributionform.nodeMianData.cpuValue = ''
      this.distributionform.nodeMianData.ramValue = ''
      this.distributionform.optionsValue0 = []
      this.distributionform.optionsValue1 = []
      this.distributionform.optionsValue2 = []
      this.distributionform.optionsValue3 = []
      this.distributionform.optionsValue4 = []
      this.distributionform.optionsValue5 = []
      this.distributionform.optionsValue6 = []
      this.distributionform.optionsValue7 = []
      this.distributionform.virtualStepCurrent = 1
      this.distributionform.distributionData = ''
      let type = e == 1 ? false : true
      this.getImageList(type)
    },
    // 跳转到编辑实验镜像页
    VirtualLink() {
      let self = this
      // self.distributionform.resource = 1
      // let cluster = self.distributionform.resource == 1 ? false : true
      self.getImageList(false)
      self.$http
        .get('/tes/image-allocation/image?cluster=true&notebook=false')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.distributionform.options1 = res.data
            self.distributionform.options2 = res.data
            self.distributionform.options3 = res.data
            self.distributionform.options4 = res.data
            self.distributionform.options5 = res.data
            self.distributionform.options6 = res.data
            self.distributionform.options7 = res.data
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })

      // 显示分配镜像弹窗
      self.dialogDistributionFormVisible = true

      self.$http
        .get(
          '/tes/image-allocation/course/' +
            self.courseId +
            '/' +
            self.singleTaskId
        )
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            if (res.data.allocated) {
              self.distributionform.experimentType = res.data.type
              //获取可视化实验单节点/notebook实验镜像列表
              if (res.data.type == 2) {
                self.getImageList(true)
              }
              if (res.data.mode == 1) {
                self.distributionform.resource = res.data.mode
                // 伪分布取值
                self.distributionform.distributedData.cpuValue =
                  '' + res.data.cpu + ''
                self.distributionform.distributedData.ramValue =
                  '' + res.data.ram + ''
                // self.distributionform.distributedData.switchValue = res.data.gpu

                self.distributionform.optionsValue0 = [
                  res.data.image.imageSource,
                  res.data.image.imageId,
                ]
                self.handleItemChange(self.distributionform.optionsValue0)
              } else if (res.data.mode == 2) {
                self.distributionform.resource = res.data.mode
                // 主节点取值
                self.distributionform.nodeMianData.cpuValue =
                  '' + res.data.cpu + ''
                self.distributionform.nodeMianData.ramValue =
                  '' + res.data.ram + ''
                self.distributionform.nodeMianData.switchValue = res.data.gpu

                self.distributionform.optionsValue7 = [
                  res.data.image.imageSource,
                  res.data.image.imageId,
                ]
                // 从节点镜像配置
                self.distributionform.mirrorConfigData.cpuValue =
                  '' + res.data.slaveCpu + ''
                self.distributionform.mirrorConfigData.ramValue =
                  '' + res.data.slaveRam + ''
                self.distributionform.mirrorConfigData.switchValue =
                  res.data.slaveGpu
                self.distributionform.virtualStepCurrent = res.data.slaveSize
                self.$nextTick(() => {
                  if (res.data.slaveSize == 1) {
                    self.distributionform.optionsValue1 = [
                      res.data.slaveImages[0].imageSource,
                      res.data.slaveImages[0].imageId,
                    ]
                  } else if (res.data.slaveSize == 2) {
                    self.distributionform.optionsValue1 = [
                      res.data.slaveImages[0].imageSource,
                      res.data.slaveImages[0].imageId,
                    ]
                    self.distributionform.optionsValue2 = [
                      res.data.slaveImages[1].imageSource,
                      res.data.slaveImages[1].imageId,
                    ]
                  } else if (res.data.slaveSize == 4) {
                    self.distributionform.optionsValue1 = [
                      res.data.slaveImages[0].imageSource,
                      res.data.slaveImages[0].imageId,
                    ]
                    self.distributionform.optionsValue2 = [
                      res.data.slaveImages[1].imageSource,
                      res.data.slaveImages[1].imageId,
                    ]
                    self.distributionform.optionsValue3 = [
                      res.data.slaveImages[2].imageSource,
                      res.data.slaveImages[2].imageId,
                    ]
                    self.distributionform.optionsValue4 = [
                      res.data.slaveImages[3].imageSource,
                      res.data.slaveImages[3].imageId,
                    ]
                  } else if (res.data.slaveSize == 6) {
                    self.distributionform.optionsValue1 = [
                      res.data.slaveImages[0].imageSource,
                      res.data.slaveImages[0].imageId,
                    ]
                    self.distributionform.optionsValue2 = [
                      res.data.slaveImages[1].imageSource,
                      res.data.slaveImages[1].imageId,
                    ]
                    self.distributionform.optionsValue3 = [
                      res.data.slaveImages[2].imageSource,
                      res.data.slaveImages[2].imageId,
                    ]
                    self.distributionform.optionsValue4 = [
                      res.data.slaveImages[3].imageSource,
                      res.data.slaveImages[3].imageId,
                    ]
                    self.distributionform.optionsValue5 = [
                      res.data.slaveImages[4].imageSource,
                      res.data.slaveImages[4].imageId,
                    ]
                    self.distributionform.optionsValue6 = [
                      res.data.slaveImages[5].imageSource,
                      res.data.slaveImages[5].imageId,
                    ]
                  }
                })
                self.handleItemChange(self.distributionform.optionsValue7)
              }
            }
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //弹窗step切换
    AddClass(index) {
      let self = this
      // if(index != 2){
      //     return
      // }
      self.distributionform.virtualStepCurrent = index
    },
    // 分配镜像
    // 表单提交
    DistributionFormSave(formName, tag) {
      // tag标记1.保存 2.保存并跳转实验镜像
      let self = this
      self.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {},
            slaveImageIdsArr = []
          // data.chapterIds = self.chapterId
          data.mode = self.distributionform.resource
          data.experimentType = self.distributionform.experimentType
          if (self.distributionform.resource == 1) {
            data.imageId = self.distributionform.optionsValue0[1]
              ? self.distributionform.optionsValue0[1]
              : ''
            data.cpu = self.distributionform.distributedData.cpuValue
            data.ram = self.distributionform.distributedData.ramValue
            // data.gpu = self.distributionform.distributedData.switchValue

            if (data.imageId == '') {
              self.$message.error('请选择镜像')
              return
            }
          } else if (self.distributionform.resource == 2) {
            data.imageId = self.distributionform.optionsValue7[1]
              ? self.distributionform.optionsValue7[1]
              : ''
            data.cpu = self.distributionform.nodeMianData.cpuValue
            data.ram = self.distributionform.nodeMianData.ramValue
            data.gpu = self.distributionform.nodeMianData.switchValue
            data.slaveCpu = self.distributionform.mirrorConfigData.cpuValue
            data.slaveRam = self.distributionform.mirrorConfigData.ramValue
            data.slaveGpu = self.distributionform.mirrorConfigData.switchValue

            if (data.imageId == '') {
              self.$message.error('请选择主节点镜像')
              return
            }

            if (self.distributionform.virtualStepCurrent == 1) {
              slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
              if (self.distributionform.optionsValue1[1] == undefined) {
                self.$message.error('请选择从节点1镜像')
                return
              }
            } else if (self.distributionform.virtualStepCurrent == 2) {
              slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
              if (self.distributionform.optionsValue1[1] == undefined) {
                self.$message.error('请选择从节点1镜像')
                return
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue2[1])
              if (self.distributionform.optionsValue2[1] == undefined) {
                self.$message.error('请选择从节点2镜像')
                return
              }
            } else if (self.distributionform.virtualStepCurrent == 4) {
              slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
              if (self.distributionform.optionsValue1[1] == undefined) {
                self.$message.error('请选择从节点1镜像')
                return
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue2[1])
              if (self.distributionform.optionsValue2[1] == undefined) {
                self.$message.error('请选择从节点2镜像')
                return
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue3[1])
              if (self.distributionform.optionsValue3[1] == undefined) {
                self.$message.error('请选择从节点3镜像')
                return
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue4[1])
              if (self.distributionform.optionsValue4[1] == undefined) {
                self.$message.error('请选择从节点4镜像')
                return
              }
            } else if (self.distributionform.virtualStepCurrent == 6) {
              slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
              if (self.distributionform.optionsValue1[1] == undefined) {
                self.$message.error('请选择从节点1镜像')
                return
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue2[1])
              if (self.distributionform.optionsValue2[1] == undefined) {
                self.$message.error('请选择从节点2镜像')
                return
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue3[1])
              if (self.distributionform.optionsValue3[1] == undefined) {
                self.$message.error('请选择从节点3镜像')
                return
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue4[1])
              if (self.distributionform.optionsValue4[1] == undefined) {
                self.$message.error('请选择从节点4镜像')
                return
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue5[1])
              if (self.distributionform.optionsValue5[1] == undefined) {
                self.$message.error('请选择从节点5镜像')
                return
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue6[1])
              if (self.distributionform.optionsValue6[1] == undefined) {
                self.$message.error('请选择从节点6镜像')
                return
              }
            }
            data.slaveImageIds = slaveImageIdsArr
          }
          self.$http
            .post('/tes/image-allocation/course/' + self.singleTaskId, data)
            .then((response) => {
              let res = response.data
              if (res.code == '200') {
                if (tag == 1) {
                  self.$message({
                    message: '镜像分配成功',
                    type: 'success',
                  })
                  // 镜像分配弹窗隐藏
                  self.dialogDistributionFormVisible = false
                } else {
                  self.$router.push({
                    path: '/Teaching/MyCourses/ModifyVirtualMachine',
                    query: {
                      totleScore: this.taskform.score,
                      courseId: this.courseId,
                      id: this.singleTaskId,
                    },
                  })
                }
              } else {
                self.$message.error(res.message)
              }
            })
            .catch((err) => {
              console.log(err)
            })
        }
      })
    },
    handleItemChange(data) {
      let self = this
      if (data[1]) {
        self.$http
          .get('/tes/image-allocation/image/' + data[1])
          .then((response) => {
            let res = response.data
            if (res.code == '200') {
              self.distributionform.distributionData = res.data
            } else {
              self.$message.error(res.message)
            }
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },

    //关闭弹窗
    close() {
      this.$nextTick(() => {
        this.$refs.formlist.resetFields()
      })
    },

    // 二期 新增word上传
    getFile($event) {
      let self = this

      let fileType = $event.target.files[0].name

      fileType = fileType.substring(
        fileType.lastIndexOf('.') + 1,
        fileType.length
      ) //取得后缀名
      if (fileType.toLowerCase() != 'docx') {
        self.$message.error('请上传docx文件')
        return
      }
      const loading = self.$loading({
        lock: true,
        text: '文件上传中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      let arr = []
      let formData = new FormData()

      formData.append('file', $event.target.files[0])

      self.$http
        .post('/tes/file/word2markdown', formData, {
          headers: { 'Content-Type': 'multipart/form-data' },
        })
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.$message({
              message: '上传成功',
              type: 'success',
            })
            loading.close()
            self.$nextTick(function () {
              self.$refs.taskEdit.value = res.data
            })
            $event.target.value = ''
          } else {
            loading.close()
            $event.target.value = ''
            self.$message.error(res.message)
          }
        })
    },
  },
}
</script>
<style scoped>
.spance {
  margin-top: 20px;
}
.iconBtn {
  display: flex;
  justify-content: flex-end;
}
.iconBtn .icon-baocun2 {
  color: #4d73c0;
  font-size: 22px;
  vertical-align: text-top;
  margin-right: 25px;
  cursor: pointer;
}
.righs {
  text-align: right;
  margin-right: 10px;
}
.righs-icon {
  margin-left: 15px;
}
.btn-styles {
  margin-bottom: 20px;
}
.el-radio-group {
  /* margin-top: 20px */
}
.el-radio-button:last-child >>> .el-radio-button__inner {
  border-radius: 5px;
}
.el-radio-button:first-child >>> .el-radio-button__inner {
  border-radius: 5px;
}
.el-radio-group >>> .el-radio-button__inner {
  border: none;
  padding: 14px 14px;
  box-shadow: 0 0 0 #fff;
}
.el-radio-group
  >>> .el-radio-button__orig-radio:checked
  + .el-radio-button__inner {
  background-color: #dcebfc;
  color: #3a8eee;
  box-shadow: 0 0 0 #fff;
}
.iconfontlist:hover .xiaz2 {
  opacity: 0.7 !important;
}
.blocks::-webkit-scrollbar {
  width: 3px;
}
.blocks::-webkit-scrollbar-thumb {
  background: #d6d8d8;
  border-radius: 50px;
}
.blocks {
  overflow-y: scroll;
  max-height: 400px;
}
.dialog-tips >>> .el-input__inner {
  width: 220px;
}
.clearfix-right {
  margin-right: 10px;
}
.clearfix >>> .el-input__inner {
  width: 180px;
}
.ediator-ev >>> .v-note-wrapper {
  height: 500px;
  z-index: 1;
}
.ediator-ev >>> .v-note-wrapper.fullscreen {
  height: auto !important;
}
.ediator-ev >>> .fullscreen {
  top: 60px;
}
.el-textarea >>> .el-textarea__inner {
  height: 190px;
  background: #fafafa;
  padding: 5px 31px 5px 22px;
}
</style>
<style lang="scss">
@import './../../../styles/layout/color_variables';
.filter-wraper {
  .input-wraper {
    margin-top: 20px;
    .el-input__inner {
      width: 100%;
    }
  }
  .navBox {
    .reportTemplate {
      padding-bottom: 10px;
      margin-left: 190px;
      cursor: pointer;
    }
    .testTemplate {
      padding-bottom: 10px;
      margin-left: 40px;
      cursor: pointer;
    }
    .templateCheck {
      border-bottom: 2px solid #385899;
      color: #385899;
      cursor: pointer;
    }
  }
  .block {
    margin: 20px 0;
    overflow-y: scroll;
    height: 483px;
  }
  .saveBtn {
    text-align: center;
    margin-top: 10px;
  }
}
#experimentFile {
  // 分配镜像弹窗样式
  .dialog-distribution {
    .el-dialog__body {
      min-height: 350px;
    }
    .el-form {
      padding: 0 50px;
      .el-dialog__body {
        position: relative;
      }
      .el-form-item__label {
        width: 95px;
      }
      .el-select {
        .el-input__inner {
          width: 80px;
        }
      }
      .el-input__icon {
        line-height: 32px;
      }
      .miror-item {
        .el-form-item {
          width: 305px;
          .el-select {
            margin-right: 5px;
            .el-input__inner {
              width: 150px;
            }
          }
        }
      }
      .config-item {
        .item-config {
          width: 340px;
          .el-select {
            .el-input__inner {
              width: 110px;
            }
          }
        }
        .item-cpu {
          .el-form-item__error {
            left: 95px;
          }
        }
        .el-form-item {
          width: 305px;
          .el-select {
            margin-right: 5px;
          }
          &.item-distributed {
            width: 270px;
            .el-select {
              .el-input__inner {
                width: 180px;
              }
            }
            .el-form-item__error {
              left: 85px;
            }
          }
          &.item-Gpu {
            width: 100px;
            .el-form-item__label {
              width: 55px;
            }
          }
        }
      }
      .form-title {
        font-size: 16px;
        color: #385899;
        width: 85px;
        margin-bottom: 15px;
        text-align: center;
      }
      .el-select {
        .el-input__inner {
          width: 180px;
        }
      }
      .el-cascader {
        line-height: 32px;
      }
      .item-node {
        .el-form-item {
          display: inline-block;
          width: 330px;
        }
      }
    }
    .el-dialog__footer {
      text-align: center;
    }
    .button-style {
      min-width: 90px;
    }
    .el-radio-group {
      .el-radio__inner {
        border-color: #dcdfe6;
      }
      .el-radio {
        width: 80px;
      }
    }
    .virtual-step {
      width: 188px;
      border-bottom: solid 3px #dfdfdf;
      margin-top: 15px;
      margin-left: 80px;
      ul {
        li {
          float: left;
          width: 19px;
          height: 19px;
          line-height: 19px;
          color: #fff;
          font-size: 12px;
          text-align: center;
          border-radius: 10px;
          margin: -9px 0 0 0;
          background: #d9d9d9;
          cursor: pointer;
          &.active-disabled {
            cursor: not-allowed;
          }
          &:first-child {
            margin-left: 10%;
          }
          &:nth-child(2) {
            margin-left: 29%;
          }
          &:last-child {
            margin-left: 31%;
          }
          &.active {
            background: #1277eb;
          }
        }
      }
    }
    .distribution-item {
      width: 208px;
      height: 280px;
      border: solid 1px #e8e8e8;
      border-radius: 4px;
      position: absolute;
      right: 55px;
      top: 95px;
      .jx-course-box {
        margin-top: 25px;
        text-align: center;
        img {
          width: 155px;
        }
        span {
          display: block;
          font-size: 14px;
          color: $title-gray;
          margin-top: 10px;
        }
      }
      .jx-course-icon {
        position: absolute;
        right: 18px;
        top: -5px;
      }
      .jx-course-text {
        margin-top: 10px;
        margin: 10px 24px 0;
        height: 145px;
        overflow-y: scroll;
        font-size: 12px;
        line-height: 16px;
        color: $table-gray;
        word-wrap: break-word;
        &::-webkit-scrollbar {
          width: 2px;
        }

        &::-webkit-scrollbar-thumb {
          background: #6c6c6c;
        }
      }
    }
  }
  // .el-cascader-menu{
  //     height: auto;
  // }
}
</style>
<style scoped lang="scss">
@import './../../../styles/layout/color_variables';
#experimentFile {
  margin-top: 0px !important;
  position: relative;
  .ediator {
    clear: both;
    padding-top: 15px;
    position: relative;
    z-index: 1;
  }
  .btn-center {
    text-align: center;
    padding: 20px 0;
  }
  .iframse {
    clear: both;
    padding-top: 10px;
    width: 1120px;
    padding-left: 15px;
    &::-webkit-scrollbar {
      width: 5px;
    }

    &::-webkit-scrollbar-thumb {
      background: #c1c1c1;
    }
    .markdown-body {
      padding: 0;
    }
  }
  .virtual-position {
    position: fixed;
    right: 90px;
    bottom: 120px;
    cursor: pointer;
    z-index: 10;
    &:hover {
      transform: rotate(360deg);
      transition: 0.5s;
    }
  }

  //专科版本
  .dialogSortul li > p {
    line-height: 29px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 8px;
    i {
      font-size: 15px;
      color: #3c5b9b;
    }
    &:hover {
      color: #398def;
      i {
        color: #398def;
      }
    }
  }
  //专科版本视频
  .uploadBtns {
    position: relative;
    margin-top: 35px;
    .uploadBtns-file {
      margin: 8px 0;
      color: #cacaca;
    }
  }
  #version-files {
    position: absolute;
    left: 0;
    opacity: 0;
    height: 130px;
    top: -35px;
    width: 220px;
    cursor: pointer;
  }
  .video {
    width: 1200px;
    margin: 10px auto;
  }
  .video-empty {
    border: 1px dashed #b0b0b0;
    width: 220px;
    height: 130px;
    line-height: 130px;
    text-align: center;
    cursor: pointer;
    position: relative;
    border-radius: 6px;
    margin-left: 30px;
    margin-bottom: 40px;
  }
  .video-img {
    cursor: pointer;
    position: relative;
    background: url('../../../assets/images/defalut.png') no-repeat;
    width: 220px;
    height: 130px;
    margin-bottom: 30px;
    margin-left: 30px;
  }
  .video-img-load {
    cursor: pointer;
    position: relative;
    background: url('../../../assets/images/defalut.png') no-repeat;
    width: 220px;
    height: 130px;
    //  margin-bottom: 30px;
    margin-left: 30px;
    color: #fff;
    text-align: center;
    padding-top: 45px;
    display: none;
  }
  .video-img > img {
    width: 200px;
    height: 100px;
    line-height: 100px;
  }
  .iconpost {
    padding: 45px 20px 10px 20px;
    color: #fff;
  }
  .iconpost .filename {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 180px;
    text-align: center;
  }
  .icon-tubiaozhizuo- {
    color: #385899;
    font-size: 20px;
    vertical-align: bottom;
    cursor: pointer;
  }
  .icon-shangchuan- {
    margin-right: 3px;
    font-size: 15px;
  }
  .el-icon-search {
    margin-right: 3px;
  }
  .icon-icon_edit {
    font-size: 14px;
    margin-right: 14px;
    margin-top: 32px;
    display: block;
  }
  .iconfontlist {
    text-align: center;
    margin-top: 12px;
    i {
      background: #fff;
      opacity: 0.7;
      border-radius: 50%;
      width: 19px;
      height: 19px;
      display: inline-block;
      padding: 4px;
      text-align: center;
      color: #000;
      margin-right: 3px;
      &:hover {
        opacity: 1;
      }
    }
    #versionFile {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 27px;
      height: 27px;
      opacity: 0;
    }
    .icon-shangchuan {
      position: relative;
    }
    .icon-Group- {
      font-weight: 600;
    }
  }
  #video {
    width: 100%;
  }
  .icon-baocun2 {
    color: #4d73c0;
    font-size: 22px;
    vertical-align: text-top;
    margin-left: 5px;
    cursor: pointer;
    &:hover {
      color: #385899;
    }
  }
  .right-icon {
    margin-right: 20px;
  }
  .icon-icon_edit {
    color: #4d73c0;
    font-size: 22px;
    cursor: pointer;
  }
  //由于冲突时添加的
  //word版本上传样式
  // .upload-btn {
  //   // position: relative;
  //   display: flex;
  //   width: 100px;
  //   span {
  //     // &.word-upload {
  //       // position: relative;
  //       // float: left;
  //       width: 28px !important;
  //       height: 28px !important;
  //       // overflow: hidden;
  //       margin-right: 10px;
  //     // }
  //     i{
  //       width: 100%;
  //       height: 100%;
  //     }
  //   }
  //   .icon-tubiaozhizuomoban2 {
  //     font-size: 30px;
  //     color: #4d73c0;
  //     vertical-align: -6px;
  //     &:hover {
  //       color: #385899;
  //     }
  //   }
  // }
  #upload-file-input {
    position: absolute;
    left: 0;
    opacity: 0;
    height: 30px;
    top: 0px;
    width: 24px;
  }
  .dialogSort {
    .sortable-chosen {
      background: #d6eafe;
      border: 1px dashed #467cb3;
      color: #1577ea;
    }
  }
}
</style>
<!-- 任务信息-->
<style lang="scss" scoped>
.task_info {
  width: 100%;
  display: flex;
  .info_left {
    width: 80%;
    .task_title {
      font-weight: 400;
      font-size: 25px;
    }
    .task_name,
    .task_score {
      margin-top: 30px;
      display: flex;
      align-items: center;
      p {
        width: 80px;
      }
      input {
        width: 250px;
        height: 30px;
        line-height: 30px;
        background-color: white;
        border: 1px solid rgb(190, 186, 186);
        border-radius: 5px;
      }
    }
    .task_score {
      margin-bottom: 40px;
    }
  }
  .info_right {
    width: 20%;
    .task_save {
      float: right;
      margin: 30px 10px 0 0;
      width: 70px;
      height: 25px;
      color: #409eff;
      border: 1px solid #409eff;
      text-align: center;
      line-height: 25px;
      border-radius: 12.5px;
    }
  }
}
.saveBtn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .btn-list {
    display: flex;
    width: 200px;
    justify-content: space-between;
    align-items: center;
    position: relative;
    span {
      i {
        margin: 0px !important;
      }
    }
    span:nth-child(1) {
      position: absolute;
      width: 28px;
      height: 28px;
      overflow: hidden;
      top: 0;
      right: 60px;
      i {
        position: absolute;
        top: 6px;
        left: 4px;
      }
    }
    span:nth-child(2) {
      position: absolute;
      width: 28px;
      height: 28px;
      overflow: hidden;
      top: 0;
      right: 30px;
    }
    span:nth-child(3) {
      position: absolute;
      width: 28px;
      height: 28px;
      overflow: hidden;
      top: 0;
      right: 0px;
      i {
        position: absolute;
        top: 6px;
        left: 3px;
      }
    }
    .icon-tubiaozhizuomoban2 {
      font-size: 30px;
      color: #4d73c0;
      vertical-align: -6px;
      &:hover {
        color: #385899;
      }
    }
  }
}
</style>
